<template>
  <div>
    <a-modal
      title="新增按钮"
      :visible="visible"
      :confirmLoading="confirmLoading"
      destroyOnClose
      @cancel="cancel"
      @ok="handleOk"
    >
      <a-form
        ref="ruleForm"
        :form="form"
        :label-col="{span:4}"
        :wrapper-col="{span:19}"
        layout="horizontal"
      >
        <a-form-item label="上级菜单">
          <a-select
            :disabled="true"
            v-decorator="['permissionId', {rules: [{ required: true, message: '请选择状态' }],
            initialValue: this.record.permissionId === '1' ? -1 : this.record.permissionId }]"
            show-search
            :filter-option="filterOption"
            option-filter-prop="children"
          >
            <a-select-option :value="-1">主类目</a-select-option>
            <a-select-option
              :value="item.permissionId"
              v-for="item in treeData"
              @click="changeMenu(item)"
            >
              {{item.permissionName}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="按钮名称">
          <a-input
            v-decorator="['permissionName', {rules: [{ required: true, message: '按钮名称不能为空' }],
            initialValue: this.detailInfo.permissionName}]"
            placeholder="请输入按钮名称..."
            :maxLength="50"
          />
        </a-form-item>
        <a-form-item label="权限标识">
          <a-input
            v-decorator="['permissionTag', {rules: [{ required: true, message: '权限标识不能为空'}]}]"
            placeholder="(例如: system:backstage:permission:delete)"
            :maxLength="50"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
import { message } from 'ant-design-vue'
import { addRoleInfo, getMenuDetail } from '@/api/menu-manage'
import { getMenuList, mapTree } from '@/utils/util'
import IconSelector from '@/components/IconSelector'

export default {
  name: 'adminManagementAddEdit',
  props: ['visible', 'record', 'type'],
  components:{
    IconSelector
  },
  data() {
    return {
      form: this.$form.createForm(this),
      confirmLoading: false,
      modalVisible: false,
      roleSelectList: [],
      // 新增目前最多是两层菜单，编辑需要展示父类，所以暂时先这样处理
      treeData: getMenuList(store.getters.roles, []),

      iconVisible: false, // 图标

      detailInfo: {} // 权限详情值
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val;
    }
  },
  methods: {
    // 权限详情
    initDetail() {
      const params = {
        permissionId: this.record.permissionId,
        userId: store.getters.userInfo?.userId,
      }
      getMenuDetail(params).then(res => {
        this.detailInfo = res.data;
      })
    },
    changeMenu(item) {
      this.detailInfo = item;
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        const length = this.record?.menuResponseList.length
        if (!err) {
          this.confirmLoading = true;
          let params = {
            ...values,
            parentPerId: !values?.permissionId ? null : this.record.permissionId,
            permissionTag: values.permissionTag, // 权限标识
            permissionLevel: 'operate_permission',
            permissionPath:'/', // 页面路径
            permissionFile:'/', // 文件名
            permissionLog: 'stop',
            permissionSort: length || 1,
            userId: store.getters.userInfo?.userId,
          }
          addRoleInfo(params).then(res => {
            this.confirmLoading = false
            if (res.code === 200) {
              message.success(res.msg || '操作成功！')
              this.$emit('onOk', this.type ? 'add' : 'edit')
            }
          })
        }
      })
    },
    cancel() {
      this.resetFormValue()
      this.$emit('cancel')
    },
    // 重置表单一般在第一次访问表单时进行重置
    resetFormValue() {
      this.$nextTick(() => {
        this.form.resetFields()
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }
}
</script>
